<script setup>
	import { computed } from 'vue'
	import { storeToRefs } from 'pinia'
	import { useHomeStore } from '@/stores/modules/home.js'
	import { formatMonthDay } from '@/utils/format-date'

	const homeStore = useHomeStore()
	const { date } = storeToRefs(homeStore)
</script>

<template>
	<div class="search-bar">
		<div class="search">
			<div class="select-time">
				<div class="item start">
					<div class="name">住</div>
					<div class="date">{{ date.startDate }}</div>
				</div>
				<div class="item end">
					<div class="name">离</div>
					<div class="date">{{ date.endDate }}</div>
				</div>
			</div>
			<div class="content">
				<div class="keyword">关键字/位置/民宿</div>
			</div>
			<div class="right">
				<i class="iconfont icon-chazhao"></i>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.search-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		height: 46px;
		padding: 16px 16px 10px;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
		.search {
			display: flex;
			align-items: center;
			background-color: #f2f4f5;
			border-radius: 5px;
			height: 35px;
			padding: 5px;
			.select-time {
				padding-right: 5px;
				border-right: 1px solid #fff;
				.item {
					display: flex;
					color: #999;
					font-size: 12px;
					.date {
						padding-left: 3px;
						color: #333;
					}
				}
			}
			.content {
				padding: 5px;
				flex: 1;
				color: #999;
			}
			.right {
				width: 25px;
				height: 25px;
				.iconfont.icon-chazhao {
					font-size: 25px;
				}
			}
		}
	}
</style>
